<template>
  <div class="app-container calendar-list-container">
    <div v-show="visible">
      <el-form :model="entity" :rules="dataRule" ref="entity" label-width="80px" size="small">
        <el-row>
          <el-col :span="10">
            <el-form-item label="订单" prop="orderNo">
              <el-input v-model="entity.orderNo" :readonly="true">
                <el-button slot="append" icon="el-icon-search" @click="openOrder"></el-button>
              </el-input>
            </el-form-item>
          </el-col>
          <el-col :span="10">
            <el-form-item label="金额" prop="amount">
              <el-input v-model="entity.amount" type="number" placeholder="金额" :readonly="view"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="10">
            <el-form-item label="银行账号" prop="bankCode">
              <el-input v-model="entity.bankCode" type="text" placeholder="银行账号" :readonly="view"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="10">
            <el-form-item label="开户行" prop="backName">
              <el-input v-model="entity.backName" type="text" placeholder="开户行" :readonly="view"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="10">
            <el-form-item label="开户人" prop="backUser">
              <el-input v-model="entity.backUser" type="text" placeholder="开户人" :readonly="view"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="10">
            <el-form-item label="付款时间" prop="payTime">
              <el-date-picker v-model="entity.payTime" type="datetime" format="yyyy-MM-dd HH:mm:ss" value-format="yyyy-MM-dd HH:mm:ss" placeholder="付款时间" :readonly="view">
              </el-date-picker>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="20">
            <el-form-item label="备注" prop="remark">
              <el-input v-model="entity.remark" type="textarea" placeholder="备注" :readonly="view" :rows="5"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="20" v-if="!view">
            <el-form-item label="附件">
              <el-upload class="upload-demo" :action="uplaodFileUrl" :on-success="fileSuccess" :on-remove="fileRemove" :file-list="fileList" list-type="picture" accept="image/*">
                <el-button size="small" type="primary">点击上传</el-button>
                <!-- <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div>-->
              </el-upload>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="20" v-if="view">
            <el-form-item label="">
              <grid :columns="columns" title="使用明细" :multi="false" :url="queryUrl" ref="mainGrid" :loading="false" :pagination="false" :queryEntity="detailQueryEntity"></grid>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="20" v-if="view">
            <div class="box-show-box">
              <el-image v-for="(image,index) in entity.files" :key="index" style="width: 200px; height: 200px" :src="image.fullUrl" :preview-src-list="[image.fullUrl]">
              </el-image>
            </div>
          </el-col>
        </el-row>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <div class="dialog-footer-div">
          <el-button @click="cancel()">取消</el-button>
          <el-button v-if="!view" type="primary" @click="submit()">确定</el-button>
        </div>
      </span>
    </div>
    <GridDialog ref="orderGridDialog" :multi="false" :url="orderUrl" :columns="orderColumns" @select="selectOrderData" :queryEntity="orderQueryEntity" :queryList="orderQueryList">
    </GridDialog>
  </div>
</template>

<script>
import request from '@/router/axios'
import url from '@/const/apiURL'
import { Message, MessageBox } from 'element-ui'
import GridDialog from '@/components/GridDialog'
import { queryField } from '@/const/query'
import { colunms } from '@/const/colunms'
import grid from '@/components/Grid'


export default {
  components: { GridDialog, grid },
  data () {
    return {
      queryUrl: url.ADVANCE_DETAIL_URL,
      orderUrl: url.ORDER_LIST_URL,
      orderColumns: colunms().orderColumns,
      orderQueryList: queryField().order,
      orderQueryEntity: { key: 'PROD' },
      view: false,
      uplaodFileUrl: url.UPLOAD_FILE_URL,
      fileList: [],
      detailQueryEntity: {},
      url: '',
      entity: {
        orderNo: '',
        amount: null,
        files: []
      },
      columns: [
        { label: '对账单号', width: 180, prop: 'billNo', align: 'left' },
        { label: '使用金额', width: 100, prop: 'amount', align: 'center' },
        { label: '创建人', width: 120, prop: 'createUserName', align: 'center' },
        { label: '创建时间', width: 100, prop: 'createTime', align: 'center' }
      ],
      dataRule: {
        orderNo: [
          { required: true, message: '订单不能为空', trigger: 'blur' }
        ],
        amount: [
          { required: true, message: '金额不能为空', trigger: 'blur' }
        ],
        payTime: [
          { required: true, message: '付款时间不能为空', trigger: 'blur' }
        ]
      }
    }
  },
  props: {
    visible: {
      type: Boolean,
      default: function () {
        return false
      }
    }
  },
  methods: {
    init (title, entity, view, url) {
      this.$nextTick(() => {
        this.title = title
        this.$refs['entity'].resetFields()
        this.view = view
        this.entity = entity
        if (!entity.files) {
          this.entity.files = []
        } else {
          this.fileList = []
          entity.files.forEach(row => {
            this.fileList.push({ name: row.fileName, response: { data: { url: row.fileUrl } } })
          })
        }
        this.url = url
      })
      this.detailQueryEntity = { advanceCode: entity.advanceCode }
      this.$refs['mainGrid'].doQuery(null, this.detailQueryEntity)

    },
    fileSuccess (data) {
      if (data.success) {
        let file = data.data
        this.entity.files.push({ fileName: file.fileName, fileUrl: file.fileUrl })
      } else {
        MessageBox.alert(data.msg)
      }
    },
    fileRemove (file, fileList) {
      this.entity.files = []
      if (fileList) {
        fileList.forEach(f => {
          this.entity.files.push({ fileName: f.name, fileUrl: f.response.data.fileUrl })
        });
      }
    },
    cancel () {
      this.$emit('cancel')
    },
    openOrder () {
      this.$refs['orderGridDialog'].show()
    },
    selectOrderData (row) {
      this.entity.orderNo = row.orderNo
    },
    submit () {
      this.$refs['entity'].validate((valid) => {
        if (valid) {
          this.handleUrl(this.entity).then((data) => {
            if (data) {
              this.$emit('cancel')
            }
          })
        }
      })
    },
    handleUrl (data) {
      return request({
        url: this.url,
        method: 'post',
        data
      })
    }
  }
}
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
.box-show-box {
  margin-top: 15px;
}
</style>
